<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="/static/img1.png"></image>
		<image class="img-b" src="/static/img2.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">欢迎回来</view>
		<form class="cl">
			<!-- 用户名 -->
			<view class="t-a">
				<image src="/static/icons/username.png"></image>
				<view class="line"></view>
				<input type="text" name="username" placeholder="请输入用户名" maxlength="11" v-model="username" @blur="validateUsername" />
			</view>
			<!-- 密码 -->
			<view class="t-a">
				<image src="/static/icons/password.png"></image>
				<view class="line"></view>
				<input type="safe-password" name="password" maxlength="16" placeholder="请输入密码" v-model="password" @blur="validatePassword" />
			</view>
			<!-- 验证码 -->
			<view class="t-a">
				<image src="/static/icons/yzm.png"></image>
				<view class="line"></view>
				<input type="text" name="graphicVerifyCode" maxlength="4" placeholder="请输入验证码" v-model="graphicVerifyCode"/>
                <view class="code-img-wrapper t-h" @click="updateImageCode" >
                  <canvas style="width:220rpx;height:86rpx;" canvas-id="canvas"></canvas>
                </view>
			</view>
			<button @tap="login()" style="background-color: #dea01f;">登 陆</button>
		</form>
				<view class="cardBox">
					<view @tap="register()">
						注册新账号
					</view>
				</view>
		<view class="t-c" style="background-color: chocolate;" @tap="forgotPwd()">忘记密码？</view>
				<view class="t-f"><text>————— 本机号码一键登陆 —————</text></view>
				<view class="t-e cl">
	<view class="t-g" @tap="phoneLogin()"><image src="/static/phone.jpg"></image></view>
				</view>

	</view>
</template>
<script>
	import { Mcaptcha  } from '@/utils/mcaptcha.js'
	import { get, post, setToken } from '@/utils/api.js';  
export default {

	data() {
		return {
			title: '阿弥诺斯宠物未来', //填写logo或者app名称，也可以用：欢迎回来，看您需求
			username:'', //用户名
			password: '', //密码
			validationFailed: false, //验证中间值
			graphicVerifyCode:'', //验证码
		};
	},
	onLoad() {},
	//初始化验证码
	onReady() {
	   this.mcaptcha = new Mcaptcha({
	     el: 'canvas',
	     width: 80,
	     height: 35,
	     createCodeImg: ""
	   });
	 },
	methods: {
		updateImageCode() {
		  this.mcaptcha.refresh()
		},
		//当前登录按钮操作
			login() {
				//验证验证码
				if(!this.graphicVerifyCode) {
				    return uni.showToast({ title: '请输入图形验证码' ,icon:'error',
               duration: 2000})
				  }
				  let validate = this.mcaptcha.validate(this.graphicVerifyCode)
				  if(!validate) {
				    return uni.showToast({ title: '图形验证码错误' ,icon:'error',
               duration: 2000})
				  }

				// 验证用户名
				this.validateUsername();
				// 如果用户名验证失败，不再进行后续验证
				if (this.validationFailed) {
					return;
				}

				// 验证密码
				this.validatePassword();
				// 如果密码验证失败，不再进行后续验证
				if (this.validationFailed) {
					return;
				}

				// 如果所有验证都通过，继续登录流程
				// post('/Login', {
				//   name: 'JokerLi',  
				//   password: 999888222  
				// }, {  
				//   success: (res) => {  
				//     if (res.statusCode === 200) { // 假设成功返回200  
				//       setToken(res.data.password);  
				//       console.log('登录成功，Token已设置');  
				// 							console.log(res)
				//     }  
				//   }  
				// });
				uni.showToast({ title: '登录成功！', icon: 'none' });
			},
              // 验证用户名
              validateUsername() {
                  if (!this.username || !/^[a-zA-Z0-9_-]{6,16}$/.test(this.username)) {
                      uni.showToast({ title: '用户名只能为英文字母，数字，下划线或者短横线组成，并且长度为6~16位。', icon: 'none',duration: 2000 });
					  this.validationFailed = true;
                  }
              },
          
              // 验证密码
              validatePassword() {
                  if (!this.password || !/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,16}$/.test(this.password)) {
                      uni.showToast({ title: '密码至少包含字母、数字、特殊字符，长度为8-16位。', icon: 'none' ,                     duration: 2000});
					  this.validationFailed = true;
                  }
              },

		register()
		{
			uni.navigateTo({
			     url: '/pages/register/register'
			   });
		},
				//手机号一键登录
				phoneLogin() {
				uni.navigateTo({
					url:'../../uni_modules/uni-id-pages/pages/login/login-withpwd'
				})
					
				},

	}
};
</script>
<style>
.img-a {
	position: absolute;
	width: 100%;
	top: -150rpx;
	right: 0;
}
.img-b {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: -50rpx;
	/* margin-bottom: -200rpx; */
}
.t-login {
	width: 650rpx;
	margin: 0 auto;
	font-size: 28rpx;
	color: #000;
}

.t-login button {
	font-size: 28rpx;
	background: #5677fc;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}

.t-login input {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28rpx;
	border-radius: 50rpx;
}

.t-login .t-a {
	position: relative;
}

.t-login .t-a image {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 40rpx;
	top: 28rpx;
	/* border-right: 2rpx solid #dedede; */
	margin-right: 20rpx;
}
.t-login .t-a .line{
	width: 2rpx;
	height: 40rpx;
	background-color: #dedede;
	position: absolute;
	top: 28rpx;
	left: 98rpx;
}

.t-login .t-b {
	text-align: left;
	font-size: 46rpx;
	color: #000;
	padding: 300rpx 0 30rpx 0;
	font-weight: bold;
}
.t-login .t-b2 {
	text-align: left;
	font-size: 32rpx;
	color: #aaaaaa;
	padding: 0rpx 0 120rpx 0;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float:initial;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 200rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #000;
}
	
.t-login .t-h {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #aaff00;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
	width: 120rpx;
}
.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}

.cardBox {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	padding: 5rpx;
	background: #ffffff;
	opacity: 0.9;
	-webkit-border-radius: 20rpx;
	border-radius: 0 0 20rpx 20rpx;
	height: 1rpx;
	width: 600rpx;
	margin: 0 auto;
	position: relative;
	text-align: center;
	line-height: 70rpx;
	color: #aaa;
	font-size: 28rpx;
}
.cardBox .txt {
    margin-left: 10rpx;
}
</style>
